<template>
  <div style="cursor: pointer">
    <div v-if="props.ischange">
      <i
        v-if="store.styleInfo.styleType == 1"
        class="iconfonts"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          fontSize: props.size ? props.size : '20px',
          color: colorList5[store.styleInfo.colorType - 1].buttonColor,
        }"
      >
        &#xe653;
      </i>
      <i
        v-if="store.styleInfo.styleType == 2"
        class="iconfonts"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          fontSize: props.size ? props.size : '20px',
          color: colorList5[store.styleInfo.colorType - 1].buttonColor,
        }"
      >
        &#xe65e;
      </i>
      <i
        v-if="store.styleInfo.styleType == 3"
        class="iconfonts"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          fontSize: props.size ? props.size : '20px',
          color: colorList5[store.styleInfo.colorType - 1].buttonColor,
        }"
      >
        &#xe65e;
      </i>
    </div>
    <div v-else>
      <i
        v-if="store.styleInfo.styleType == 1"
        class="iconfonts"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          fontSize: props.size ? props.size : '20px',
          color: colorList5[store.styleInfo.colorType - 1].buttonColor,
        }"
      >
        &#xe654;
      </i>
      <i
        v-if="store.styleInfo.styleType == 2"
        class="iconfonts"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          fontSize: props.size ? props.size : '20px',
          color: colorList5[store.styleInfo.colorType - 1].buttonColor,
        }"
      >
        &#xe65b;
      </i>
      <i
        v-if="store.styleInfo.styleType == 3"
        class="iconfonts"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          fontSize: props.size ? props.size : '20px',
          color: colorList5[store.styleInfo.colorType - 1].buttonColor,
        }"
      >
        &#xe65b;
      </i>
    </div>
  </div>
</template>

<script setup lang="ts">
import { colorList5 } from '../../data';
import { useProjectStore } from '@/store';
const store = useProjectStore();
const props = defineProps({
  ischange: {
    type: Boolean,
  },
  size: {
    type: String,
  },
});
</script>

<style lang="less" scoped>
.iconfonts {
  line-height: 22px;
}
</style>
